<template>
    <div class="breadcrumb">
        <div class="title">{{title||caption}}</div>
        <div class="operat">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: '',
        props: ['title'],
        data() {
            return {
                caption: ''
            }
        },
        mounted() {
            if (!this.title) this.caption = window.document.title
        },
        methods: {},
        components: {}
    }
</script>

<style scoped lang="less">
    .breadcrumb {
        margin-bottom: .2rem;
        display: flex;
        align-items: center;
        > * {
            flex: auto;
        }
        .title {
            font-size: .18rem;
            font-weight: bold;
        }
        .operat {
            text-align: right;
        }
    }
</style>
